<template>
	<view class="content">
		<view class="nuter">
			<view v-for="(item, index) in navArr" :key="item.id" class="nav-item" :class="target == index?'active':''" @click="tabChange(index)"
			 :id="'item-' + index">
				<text class="title">{{item.name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			navArr: {
				type: Array,
				default () {
					return [{
						name: '固定菜单',
						id: 'recent'
					}, {
						name: '全部',
						id: 'all'
					}, {
						name: '文学',
						id: 'literature'
					}, {
						name: '小说',
						id: 'novel'
					}, {
						name: '教育',
						id: 'education'
					}, {
						name: '历史',
						id: 'history'
					}]
				}
			},
			scrollChangeIndex: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				target: 0,
			}
		},
		methods: {
			tabChange(index) {
				this.$emit('navbarTap', index);
				this.target = index
			},
		},
		watch: {
			scrollChangeIndex(val) {
				this.tabChange(val)
			},
		}
	}
</script>

<style>
	.nuter {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		justify-content: space-around;
		font-size: 35rpx;
	}

	.nuter view {
		flex: 1;
		font-size: 30rpx;
		text-align: center;
		transition: all 0.5s ease .1s;
		background-color: #FFFFFF;
	}

	.active {
		box-sizing: border-box;
		color: #972c22a8;
		border-bottom: 1rpx solid gray;
		background-color: #f3ffff;
		border-radius: 10rpx;
		box-shadow: 0px 0px 0px #888888;
	}

	swiper {
		height: 80vh;
		width: 100%;
		overflow: hidden;
		text-align: center;
		line-height: 300rpx;
		/* background-color: red; */
	}

	.swiper-item {
		overflow-y: scroll;
		width: 99.5%;
		height: 99%;
		/* background-color: white; */
		/* height: 99%; */
		box-sizing: border-box;
		padding: 1rpx;
	}

	.content {
		padding: 0;
	}
</style>
